<template>
<div id="">
<mt-loadmore :bottom-method="loadBottom" :top-status.sync="topStatus">
  <div class="moveBox">
    <div class="media" v-for="m in data">
      <div class="media-left media-middle">
        <a href="#">
          <img class="media-object" :src="m.images.large" alt="...">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{m.title}}</h4>

      </div>
    </div>
  </div>
  <div slot="top" class="mint-loadmore-top">
    <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
    <span v-show="topStatus === 'loading'">Loading...</span>
  </div>
</mt-loadmore>

  </div>
</template>
<script>
  import {Loadmore} from 'mint-ui'
export default {
  data(){
    return{
      topStatus: '',
      data: []
    }
  },
  methods:{
    loadBottom() {
      console.log(111)
      let start = this.data.length;

      this.$http.jsonp("http://api.douban.com/v2/movie/in_theaters?start="+start+"count=10", {wd: "a"}, {jsonp: "cb"}).then((res)=> {

        let arr = res.data.subjects;
        if(arr.length == 0){
          alert(111)
          // this.allLoaded = true;// 若数据已全部获取完毕
          // this.ref.loadmore.onBottomLoaded();
          return;
        }
        this.data = this.data.concat(arr);
        // this.allLoaded = true;// 若数据已全部获取完毕
        // this.ref.loadmore.onBottomLoaded();
      }, ()=> {
        alert("shibai")

      })
    }
  },
  mounted:function () {
    this.$http.jsonp('http://api.douban.com/v2/movie/in_theaters?count=10', {wd: "a"}, {jsonp: "cb"}).then((res)=> {
      this.data = res.data.subjects;
       console.log(res)
    }, ()=> {
      alert("shibai")
    })
  }
}
</script>
<style lang="scss" scoped>
img{
  height: 200px;
}
</style>
